<script setup lang="ts">
import { reactive, watch } from 'vue';

  const user = reactive({
    name: "张三",
    info: {
      gender: "男",
      age: 18,
    },
  });
  watch(user,()=>{
    console.log('user 发生变化了')
  })
  // watch(()=>user.info.age,()=>{
  //   console.log('age 发生)')
  // })
  // watch(()=>user.info,()=>{
  //   console.log('info 发生变化')
  // },{deep:true})
</script>
<template>
  <p>{{ user }}</p>
  <button @click="user.name = '李四'">修改名字</button>
  <button @click="user.info.age +=1">年龄+1</button>
</template>
<style scoped>
  
</style>

